import CheckUser from './checkUser.vue';
import CheckMultipleUser from './checkMultipleUser.vue';
export default {
  name: 'CheckUserInfo',
  components: { CheckUser, CheckMultipleUser },
  props: {
    userId: { // 如果 multiple 为 false，则用户id取这个
      type: String | Number,
      default: null
    },
    userList: { // 如果 multiple 为 true，则数据从这个列表取
      type: Array,
      default: null
    },
    keyName: { // 如果 multiple 为 true，指明 userList 中哪个字段为 userId
      type: String,
      default: 'id'
    },
    labelName: { // 如果 multiple 为 true，指明 userList 中哪个字段为 userName
      type: String,
      default: 'userName'
    },
    label: {
      type: String,
      default: null
    },
    multiple: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String,
      default: 'top'
    },
    containerTag: {
      type: String,
      default: 'span'
    }
  },
  methods: {
    renderSingleUser(userId, label) {
      if (!userId) {
        if (!this.$slots.default) {
          return (<span>{label || '--'}</span>);
        } else {
          return (<template>{this.$slots.default}</template>);
        }
      }
      if (!this.$slots.default) {
        return (<CheckUser userId={userId} label={label} placement={this.placement} containerTag={this.containerTag} />);
      }
      return (<CheckUser userId={userId} label={label} placement={this.placement} containerTag={this.containerTag} > {this.$slots.default} </CheckUser>);
    }
  },
  render() {
    if (!this.multiple) {
      if (!this.userId) {
        if (!this.$slots.default) {
          return (<span>{this.label || '--'}</span>);
        } else {
          return (<template>{this.$slots.default}</template>);
        }
      }
      return this.renderSingleUser(this.userId, this.label);
    } else if (this.userList && this.userList.length) {
      if (this.userList.length === 1) {
        return this.renderSingleUser(this.userList[0][this.keyName], this.userList[0][this.labelName]);
      }
      return <CheckMultipleUser userList={this.userList} keyName={this.keyName} labelName={this.labelName} placement={this.placement} containerTag={this.containerTag} />;
    }
    return (<span>--</span>);
  }
};

